<template>
	<view>
		<nav-bar title="商品详情"></nav-bar>
		<van-swipe :autoplay="3000" lazy-render>
		  <van-swipe-item v-for="imgUrl in goods.goods_banner_imgs" :key="imgUrl">
		    <image class="swipe-image" :src="imgUrl" />
		  </van-swipe-item>
		</van-swipe>
        <view class="goods-content">
			<view class="goods-price">
				￥{{goods.price}}
			</view>
		</view>
		<view class="goods-title">
			{{goods.name}}
		</view>
		<view class="goods-descripition">
			{{goods.goods_desc}}
		</view>
		<view class="detail">
			<u-parse :content="goods.detail"></u-parse>
		</view>
		<van-action-bar>
		  <van-action-bar-icon icon="chat-o" text="客服" dot />
		  <van-action-bar-icon icon="cart-o" text="购物车"
		   :badge="cartGoodsNumber" 
		   @click="goCart" 
		  />
		  <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
		  <van-action-bar-button type="warning" text="加入购物车" @click="addGoodsToCart" />
		  <van-action-bar-button type="danger" text="立即购买" @click="goPay" />
		</van-action-bar>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	const GoodsModel = uniCloud.importObject('goods_model')
	import Storage from '@/untils/storage.js'
	export default{
		data(){
			return{		
				goods:{}
			}
		},
		components:{
			uParse
		},
		computed: {
		    cartGoodsNumber () {
		        return this.$store.getters.cartGoodsNumber
		    }
		},
		onLoad(options){
			let id = options.id;//拿到id后就可以通过id拿到对应的商品数据
		    this.getGoods(id)
		},
		methods:{
			getGoods(id){
				GoodsModel.detail(id).then(res=>{
					//console.log(res);
					this.goods = res.data
				})
			},
			goCart(){
				uni.navigateTo({
					url:"/pages/cart/index"
			  	})
			},
			goPay(){
				let goods = this.goods;
				let content = `你确定要购买${this.goods.name}价格为:${this.goods.price}元`
				uni.showModal({
					title:'购买商品',
					content: content,
					success(res){
						if(res.confirm){
							//先把商品添加到用来结算的缓存中
							Storage.set('payGoods',[
								{
									_id:goods._id,
									name:goods.name,
									goods_desc:goods.goods_desc,
									goods_thumb:goods.goods_thumb,
									num:1,
									attr_id:"",
									price:goods.price
								}
							]);
							uni.navigateTo({
								url:'/pages/pay/index'
							})
						}
					}
				})
			},
			addGoodsToCart(){
				this.$store.commit("addGoods",{
					goods_id: this.goods._id,
					num: 1,
					attr_id: "0",
					price: this.goods.price*100,
					thumn: this.goods.goods_thumb,
					goods_name: this.goods.name,
					goods_descript: this.goods.goods_desc
				})
				console.log(this.$store.state.cart.cart);
			},
			htmlUnEscape(str) { //反转义				var unescapes = {						'&amp;': '&',						'&lt;': '<',						'&gt;': '>',						'&quot;': '"',						'&#39;': "'"					},					reEscapedHtml = new RegExp(/&(?:amp|lt|gt|quot|#39);/g);				return (str && reEscapedHtml.test(str)) ? str.replace(reEscapedHtml, function(entity) {					return unescapes[entity];				}) : (str || '')
			}
		}
	}
</script>

<style>
	@import url("@/components/u-parse/u-parse.css");
	.swipe-image{
		width: 100%;
		height: 750upx;
	}
	.goods-content{
		width: 100%;
		height: 100upx;
		background-image: url(//img30.360buyimg.com/jdg/jfs/t1/140310/33/25918/3166/61d65d24Eed559f14/d782a28e6d213595.png);
	    background-repeat: no-repeat;
		background-size: 750upx 100upx;
	}
	.goods-price{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		color: #fff;
	}
	.detail image{
		width: 100% !important;
	}
</style>